<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="../../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="text-align: right;">
    <div>
        <button class="btn btn-danger" onclick="ApplyForDispatching()">申请派工</button>
    </div>
</div>

<table id="tab">

</table>

<div class="modal fade" id="staticBackdrop1" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel1">制订工序</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container"
                     style="padding-bottom:20px ;box-shadow: rgba(144,146,154,0.46) 5px 5px; background-color: whitesmoke;margin-top: 50px;text-align: center">
                    <div>
                        <h2>制订工序单</h2>
                    </div>
                    <div class="">
                        <form>
                            <div class="form-row">
                                <div class="col">
                                    工序制订人： <input id="ProcessMaker" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    登记人： <input type="text" class="form-control" id="registrant" readonly>
                                </div>
                                <div class="col">
                                    登记时间:
                                    <span id="registrationTime"></span>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    产品编号： <span id="productId"></span>
                                </div>
                                <div class="col">
                                    产品名称:<span id="productName"></span>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col">
                                    描述： <span id="describe"></span>
                                </div>
                                <div class="col">
                                    数量:
                                    <span id="quantity"></span>
                                </div>
                            </div>
                        </form>
                        <div style="margin: 0px 20px">
                            备注：
                            <textarea class="form-control" id="remark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- Button trigger modal -->
                <button type="button" onclick="PreviewTheProcess()" class="btn btn-primary" data-toggle="modal"
                        data-target="#exampleModal">
                    预览
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 2级模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">生产派工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container"
                     style="padding-bottom:10px ;box-shadow: rgba(144,146,154,0.46) 5px 5px; background-color: whitesmoke;text-align: center">
                    <div>
                        <h2>制订工序单</h2>
                    </div>
                    <div class="">
                        <form>
                            <div class="form-row">
                                <div class="col">
                                    工序制订人： <input id="ProcessMaker1" type="text" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    产品编号： <span id="productId1"></span>
                                </div>
                                <div class="col">
                                    产品名称:<span id="productName1"></span>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col">
                                    描述： <span id="describe1"></span>
                                </div>
                                <div class="col">
                                    数量:
                                    <span id="quantity1"></span>
                                </div>
                            </div>
                            <table id="table1" style="width: 100%; margin-top: 20px">
                                <thead>
                                <tr style="background-color: #a4efef;">
                                    <th>序号</th>
                                    <th>工序名称</th>
                                    <th>工序编号</th>
                                    <th>工时数</th>
                                    <th>单位工时成本</th>
                                    <th>工时成本小计</th>
                                    <th>查看物料</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>

                            <div class="form-row" style="margin: 20px 0px">
                                <div class="col">
                                    登记人： <input type="text" class="form-control" id="registrant1" readonly>
                                </div>
                                <div class="col">
                                    登记时间:
                                    <span id="registrationTime1"></span>
                                </div>
                            </div>
                        </form>
                        <div style="margin: 20px 0px">
                            备注：
                            <textarea class="form-control" id="remark1" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button id="SubmissionPreparationSheet" type="button" onclick="SubmissionPreparationSheet()" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- 3级模态框-->
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel1">工序物料单</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="height: 400px">
                <div class="container"
                     style="padding-bottom:20px ;box-shadow: rgba(144,146,154,0.46) 5px 5px; background-color: whitesmoke;margin-top: 50px;text-align: center">
                    <div>
                        <h2>工序物料单</h2>
                    </div>
                    <div class="">

                        <div class="form-row" style="margin: 20px 0px">
                            <div class="col">
                                计划单编号：<span id="plannedOrderId"></span>
                            </div>
                            <div class="col">
                                工序名称:
                                <span id="processName"></span>
                            </div>
                        </div>
                        <table id="table4" style="width: 100%; margin-top: 20px">
                            <thead>
                            <tr style="background-color: #a4efef;">
                                <th>序号</th>
                                <th>物料名称</th>
                                <th>物料编号</th>
                                <th>本工序数量</th>
                                <th>单位</th>
                                <th>价格</th>
                                <th>小计</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        $("#tab").bootstrapTable({
            method: "post",
            contentType: "application/json",
            striped: true,
            pageNumber: 1,
            pageSize: 5,
            pagination: true,
            sidePagination: 'server',
            pageList: [1, 3, 5, 10],
            url: "/Dispatching/queryDispatching",
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit
                }
            },
            columns: [
                {
                    title: "选择", field: "checkbox", align: "center",
                    formatter: function (value, row, index) {
                        return "<input type='checkbox' value='" + row.productId + "'>";
                    }
                },
                {title: '生产计划编号', field: 'applyId', align: 'center',},
                {title: '产品编号', field: 'productId', align: 'center',},
                {title: '产品名称', field: 'productName', align: 'center',},
                {title: '描述', field: 'productDescribe', align: 'center'},
                {title: '数量', field: "amount", align: 'center'},
                {title: '审核时间', field: "checkTime", align: 'center'},
            ]
        })
    })

    function SubmissionPreparationSheet(){
        var plannedOrderId='';
        $("#tab input[type=checkbox]:checked").each(function (i, n) {
            plannedOrderId+=$(n).parent().next().text()+"|";
        })
        let s = plannedOrderId.substring(0,plannedOrderId.length-1);
        var labour_cost_price_sum=0;
        $("#table1 tbody tr").each(function (i,n){
            labour_cost_price_sum+=parseInt($(n).find("td").eq(5).text());
        })
        var procedureList=new Array()

        $("#table1 tbody tr").each(function (i,n){
            procedureList.push({
                detailsNumber:$(n).find("td").eq(0).text(),
                procedureId:$(n).find("td").eq(2).text(),
                procedureName:$(n).find("td").eq(1).text(),
                labourHourAmount:$(n).find("td").eq(3).text(),
                subtotal:$(n).find("td").eq(5).text(),
                costPrice:$(n).find("td").eq(4).text()
            })
        })
        var manufactureObj={
            productId:$("#productId1").text(),
            productName:$("#productName1").text(),
            applyIdGroup:s,
            productDescribe:$("#describe1").text(),
            amount:$("#quantity1").text(),
            labourCostPriceSum:labour_cost_price_sum,
            designer:$("#ProcessMaker1").val(),
            register:$("#registrant1").val(),
            registerTime:$("#registrationTime1").text(),
            remark:$("#remark1").val(),
            procedureList:procedureList,
        }
        $.ajax({
            type:"post",
            data:JSON.stringify(manufactureObj),
            url:"/Dispatching/SubmissionPreparationSheet",
            contentType: "application/json",
            success:function (data){
                if (data>0){
                    $("#exampleModal").modal("hide");
                    $("#staticBackdrop1").modal("hide");
                    $("#tab").bootstrapTable("refresh");
                    alert("提交成功等待审核");
                }else{
                    alert("提交失败");
                }
            }
        })

    }

    function ApplyForDispatching() {
        if ($("#tab input[type=checkbox]:checked").length > 0) {
            var num = 0;
            var plannedOrderId='';
            $("#tab input[type=checkbox]:checked").each(function (i, n) {
                num += parseInt($(n).parent().next().next().next().next().next().text());
                plannedOrderId+=$(n).parent().next().text()+"|";
            })
            let s = plannedOrderId.substring(0,plannedOrderId.length-1);
            $("#tab input[type=checkbox]:checked").each(function (i, n) {
                if (n.value != n.value) {
                    alert("不能选择不同的产品");
                } else {
                    $.ajax({
                        type: "post",
                        url: "/Dispatching/showProduction",
                        data: "id=" + n.value,
                        success: function (data) {
                            if (data != null && data != '') {
                                $("#staticBackdrop1").modal("show")
                                $("#registrant").val(data.register);
                                $("#registrationTime").text(data.registerTime);
                                $("#productId").text(data.productId);
                                $("#productName").text(data.productName);
                                $("#describe").text(data.productDescribe);
                                $("#quantity").text(num);
                                $("#plannedOrderId").text(s)
                            } else {
                                alert("对不起，该产品的工序设计或工序物料设计尚未完成，不能制定生产派工单");
                            }
                        }
                    })
                }
            })
        } else {
            alert("最少选择一个商品")
        }
    }


    function PreviewTheProcess() {
        $.ajax({
            type: "post",
            data: "id=" + $("#productId").text(),
            url: "/Dispatching/PreviewTheProcess",
            success: function (data) {
                $("#registrant1").val($("#registrant").val());
                $("#registrationTime1").text($("#registrationTime").text());
                $("#productId1").text($("#productId").text());
                $("#productName1").text($("#productName").text());
                $("#describe1").text($("#describe").text());
                $("#quantity1").text($("#quantity").text());
                $("#ProcessMaker1").val($("#ProcessMaker").val());
                $("#remark1").val($("#remark").val());
                $("#table1 tbody").html("");
                for (let i = 0; i < data.length; i++) {
                    $("#table1 tbody").append("<tr>" +
                        "<td>" + data[i].id + "</td>" +
                        "<td>" + data[i].procedureName + "</td>" +
                        "<td>" + data[i].procedureId + "</td>" +
                        "<td>" + (parseInt(data[i].labourHourAmount) * parseInt($("#quantity1").text())) + "</td>" +
                        "<td>" + data[i].costPrice + "</td>" +
                        "<td>" + (parseInt(data[i].subtotal) * parseInt($("#quantity1").text())) + "</td>" +
                        "<td><a href='#' onclick='CheckTheMaterial("+ data[i].id+",\"" + data[i].procedureName +"\")'  data-target=\"#exampleModal3\">查看物料</a></td>" +
                        "</tr>")
                }
            }
        })
    }

    function CheckTheMaterial(id, processName) {
        $.ajax({
            type: "post",
            data: "id=" + id ,
            url: "/Dispatching/CheckTheMaterial",
            success: function (data) {
                if (data.length > 0) {
                    $("#processName").text(processName);
                    $("#exampleModal3").modal("show");
                    $("#table4 tbody").html("");
                    for (let i = 0; i < data.length; i++) {
                        $("#table4 tbody").append("<tr>" +
                            "<td>" + data[i].id + "</td>" +
                            "<td>" + data[i].productName + "</td>" +
                            "<td>" + data[i].productId + "</td>" +
                            "<td>" + (parseInt($("#quantity1").text())*data[i].amount) + "</td>" +
                            "<td>" + data[i].amountUnit + "</td>" +
                            "<td>" + data[i].costPrice + "</td>" +
                            "<td>" + (parseInt(data[i].costPrice) * (parseInt($("#quantity1").text())*data[i].amount)) + "</td>" +
                            "</tr>")
                    }
                }else{
                    alert("没有对应的物料");
                    $("#exampleModal3").modal("hide");
                }
            }
        })

    }


</script>
</body>
</html>